<template>
    <view class="media-upload">
        <view class="upload">
            <!-- 上传图片 -->
            <view
                class="upload-media"
                @click="handleChooseMedia"
                v-if="postStore.mediaList.length < 9"
            >
                <han-icon name="add" size="64" />
            </view>

            <!-- 图片预览 -->
            <scroll-view class="media-preview" scroll-x>
                <view class="preview-container">
                    <view
                        v-for="(item, index) in postStore.mediaList"
                        :key="index"
                        class="preview-item"
                        @touchstart="handleTouchStart(index)"
                        @touchend="handleTouchEnd"
                        @longpress="showDeleteDialog(index)"
                    >
                        <!-- 图片 -->
                        <image
                            v-if="item.type === 'image'"
                            :src="item.url"
                            class="media"
                            @click="previewImage(index)"
                        />

                        <!-- 视频 -->
                        <video
                            v-else-if="item.type === 'video'"
                            :src="item.url"
                            class="preview-media"
                            controls
                        ></video>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
import { usePostStore } from '@/stores/postStores';

const postStore = usePostStore();

// 长按事件处理
const handleTouchStart = (index) => {
    currentIndex.value = index;
    longPressTimer.value = setTimeout(() => {
        showDeleteDialog(index);
    }, 800); // 长按800ms触发
};

const handleTouchEnd = () => {
    clearTimeout(longPressTimer.value);
};

const showDeleteDialog = (index) => {
    uni.showModal({
        title: '删除确认',
        content: '确定要删除这张图片吗？',
        success: (res) => {
            if (res.confirm) {
                postStore.mediaList.splice(index, 1);
            }
        }
    });
};

// 选择图片
const handleChooseMedia = () => {
    uni.chooseImage({
        count: 9 - postStore.mediaList.length,
        success: (res) => {
            let newFiles = res.tempFiles.map((file) => ({
                url: file.path,
                type: 'image',
                file: file
            }));

            postStore.updateMediaList(newFiles);
        },

        fail: (err) => {
            console.error('选择图片失败:', err);
            uni.showToast({ title: '选择图片失败', icon: 'none' });
        }
    });
};

// 预览图片
const previewImage = (index) => {
    uni.previewImage({
        current: index,
        indicator: 'number',
        loop: true,
        urls: postStore.mediaList.map((item) => item.url)
    });
};
</script>

<style lang="scss">
.media-upload {
    width: 100%;

    .upload {
        display: flex;
        gap: 10rpx;
        width: 100%;
        padding: 20rpx;

        .upload-media {
            flex-shrink: 0;
            width: 150rpx;
            height: 150rpx;
            border: 1rpx solid $han-global-border-color;
            border-radius: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .media-preview {
            width: calc(100% - 160rpx);
            white-space: nowrap;

            /* 隐藏滚动条 */
            ::-webkit-scrollbar {
                display: none !important;
                width: 0 !important;
                height: 0 !important;
            }
            -ms-overflow-style: none;
            scrollbar-width: none;

            .preview-container {
                display: inline-flex;
                gap: 10rpx;

                .preview-item {
                    flex-shrink: 0;
                    width: 150rpx;
                    height: 150rpx;
                    border: 1rpx solid $han-global-border-color;
                    border-radius: 10rpx;
                    overflow: hidden;

                    .media {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
    }
}
</style>
